<template>
    <div>
        <mHeader></mHeader>
        <div class="main-con">
            <div class="left_main">
                <leftMenu />
            </div>
            <div class="rightMain">
                <!-- 用户 -->
                <div class="top">
                    <p class="line1"> {{ info.title }}</p>
                    <div class="author">
                        <span class="name">主委 / {{ info.user_nickname }}</span>
                        <p class="price">￥<span>{{ info.price }}</span></p>
                        <span class="pay" v-if="info.price > 0 && info.is_pay != 1 && info.is_mine != 1"
                            @click="openCol">购买</span>

                    </div>
                    <div class="btn" v-if="info">
                        <div @click="openUser" v-if="info.is_mine == 1">邀请</div>
                        <div v-if="info.is_mine == 1" @click="goFabu">发文库</div>
                        <div v-if="info.is_mine != 1" @click="openXiezuo">申请协作</div>
                    </div>
                    <div class="icon" @click="openShare">
                        <!-- <i class="iconfont">&#xe611;</i> -->
                        <i class="iconfont">&#xe602;</i>
                    </div>

                    <!-- <strong> 红楼梦/石头记</strong>
                    <span>作者 / 张三，李四</span> -->
                </div>
                <div class="r_main">
                    <div style="flex: 1;">
                        <div class="tabIn">
                            <div class="tab">
                                <div v-for="item in tabList" :key="item.type" @click="getTabtype(item.type, item.path)">
                                    <span :class="{ actives: item.path == path }">{{ item.name }} {{ item.nums }}</span>
                                    <div class="botLine">
                                        <span :class="{ active: item.path == path }"></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form_con">
                            <router-view :id="id"></router-view>
                        </div>
                    </div>
                    <div class="tabIn2">
                        <div class="tab">
                            <div v-for="item in tabList2" :key="item.type">
                                <span @click="getTabtype2(item.type)" :class="{ actives: item.type == curType2 }">{{
                                    item.name }}</span>
                                <div class="botLine">
                                    <span :class="{ active: item.type == curType2 }"></span>
                                </div>
                            </div>
                            <div class="coverout" v-if="!cover">
                                <img @click="cover = true" src="@/assets/img/search.svg" alt="">
                            </div>
                            <div v-else :class="{ search: true, cover: cover }" :style="videoType ? styleBlack : ''">
                                <input ref="searchs" @focus="getfocus" type="text" placeholder=""
                                    placeholder-class="pla" v-model="keyword" @keyup.enter="goSearch">
                                <img src="@/assets/img/search.svg" alt="" @click="goSearch">
                            </div>
                        </div>

                        <!-- 搜索 -->
                        <div class="sousuo" v-show="cover">
                            <div class="sstop">
                                <p style="color: #1068E7;">搜索结果</p>
                                <el-button type="danger" @click="closeSearch" round>取消</el-button>
                            </div>


                            <div class="ptabs" style="padding-bottom: 0;" :infinite-scroll-distance="10"
                                :infinite-scroll-immediate="false">
                                <div v-for="(item, index) in slist" :key="index">
                                    <div :class="{ line1: true, videoType: videoType }" @click="checkSearch(item)">
                                        {{ item.title }}</div>
                                </div>
                                <el-empty description="没有内容了" v-if="slist.length == 0"></el-empty>

                            </div>
                        </div>
                        <!-- 私享会 -->
                        <div class="titleList" v-infinite-scroll="load" :infinite-scroll-distance="10"
                            :infinite-scroll-immediate="false" v-if="!cover">
                            <div class="titleMa" v-for="item in list" :key="item.id">
                                <p :class="{ line2: true, active: item.id == id }"
                                    @click="goPage('/shareClub/list', item.id)">
                                    {{ item.title }}
                                </p>
                            </div>
                            <el-empty style="margin: 0 auto;" description="没有内容了" v-if="list.length == 0"></el-empty>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" :width="$store.getters.isMobile ? '90%' : '50%'">
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-user-solid"></i>邀请
            </span>
            <el-form ref="form" label-width="6.25vw">
                <div class="select">
                    <el-form-item label="选择用户:" required>
                        <el-select filterable v-model="uid" placeholder="请输入用户">
                            <el-option v-for="item in users" :key="item.id" :label="item.username"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="applyUser">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible2" :width="$store.getters.isMobile ? '90%' : '50%'" @close="onClose1">
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-s-order"></i>申请协作
            </span>
            <el-form ref="form" label-width="6.25vw">
                <div class="select">
                    <el-form-item label="参与专栏:" required>
                        <el-select filterable v-model="col_id" placeholder="请选择专栏">
                            <el-option v-for="item in cols" :key="item.id" :label="item.title"
                                :value="item.id"></el-option>
                            <el-option disabled class="load-more" v-if="showMore1">
                                <span @click="loadc">加载更多...</span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="申请留言:" required>
                        <el-input type="textarea" v-model="remark" placeholder="请输入留言内容"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="applyNow">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="showPay" :width="$store.getters.isMobile ? '80%' : '40%'" @close="clearTimer">
            <span slot="title" class="dialog-header">
                <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信扫码支付
            </span>
            <div style="display: flex;align-items: center;justify-content: center;">
                <img style="max-width: 300px;max-height: 300px;" :src="pay_img" alt="">
            </div>
        </el-dialog>

        <el-dialog top="40vh" title="提示" :visible.sync="showCol" :width="$store.getters.isMobile ? '80%' : '40%'">
            <span slot="title" class="dialog-header" style="font-size: 18px;">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-money"></i>专栏支付方式
            </span>
            <span class="dialog-footer2">
                <el-button type="success" @click="buyNow(1)">微信支付</el-button>
                <el-button type="primary" @click="buyNow(2)">余额支付</el-button>
            </span>
        </el-dialog>


        <ShareDia ref="shareDia" :info="shareInfo"></ShareDia>

    </div>
</template>
<script>
import { baseUrl } from '@/apis/index'
import ShareDia from "@/components/shareDia.vue"

import leftMenu from '@/components/leftMenu.vue';
export default {
    components: {
        leftMenu,
        ShareDia
    },
    data() {
        return {
            bgUrl: '',
            tabList: [],
            curType: 1,
            tabList2: [{ name: '我的', type: 1 }, { name: '全部', type: 2 }],
            curType2: 1,
            dialogVisible: false,
            dialogVisible2: false,
            type: 1,
            remark: '',
            info: {},
            id: '',
            list: [],
            totalPage: 1,
            loading: false,
            page: 1,
            cols: [],
            col_id: '', // 申请协作选择参与专栏id 
            users: [],
            uid: '',
            pay_img: '',
            showPay: false,
            timer: null,
            showCol: false,
            shareInfo: {},
            slist: [], // 搜索结果
            sloading: false,
            stotalPage: 1,
            spageNum: 1,
            cover: false,
            keyword: '',


            totalPagec: 1,
            pageNumc: 1,
            loadingc: false,
            showMore1: false
        };
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    watch: {
        cover(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.$refs.searchs.focus();
                });
            }
        },
    },
    mounted() {
        this.getInfo()
        this.getList()
        // this.getCols()

    },

    methods: {
        onClose1() {
            this.col_id = ''
            this.cols = []
            this.pageNumc = 1
        },

        loadc() {
            var page = this.pageNumc
            //如果请求未结束就返回不连续请求
            if (this.loadingc) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPagec) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumc = page
            this.getCols()
        },
        openUser() {

            this.getUsers()
        },

        goSearch() {

            this.slist = []
            this.spageNum = 1
            this.searchVip()
        },

        searchVip() {
            this.sloading = true
            let params = {
                page: this.spageNum,
                keyword: this.keyword,
            }

            this.$api.searchVip(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    this.stotalPage = response.last_page
                    this.slist = this.slist.concat(response.data);
                    this.sloading = false
                }

            })
        },


        closeSearch() {
            this.cover = false
            this.keyword = ''
            this.slist = []
        },

        // 打开分享弹窗并记录
        openShare() {
            let params = {
                id: this.id,
                op: 1
            }
            this.$api.addShare(params).then(res => {
                if (res.data.code == 1) {
                    const fullUrl = window.location.href;
                    this.shareInfo = {
                        title: this.info.title + '的私享会分享',
                        link: fullUrl,
                        img: baseUrl + 'home/base/qrcod?url=' + fullUrl
                    }

                    this.$refs.shareDia.open()
                }
            })
        },

        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        query_pay(id) {
            // 3秒定时执行
            this.timer = setInterval(() => {
                let params = {
                    id
                }

                this.$api.queryColumn(params).then(res => {
                    if (res.data.code == 1) {
                        this.showPay = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.clearTimer()
                        this.getInfo()
                    }
                })
            }, 3000)
        },
        // 选择支付方式
        openCol() {
            this.showCol = true
        },


        // 购买专栏
        buyNow(op) {

            let params = {
                id: this.id,
                pay_op: op
            }
            this.$api.payCol(params).then(res => {
                if (res.data.code == 1) {
                    this.showCol = false
                    if (op == 1) {
                        this.showPay = true
                        this.pay_img = baseUrl + 'home/base/qrcod?url=' + res.data.data.code_url;
                        this.query_pay(res.data.data.id)
                    } else {
                        this.$message({
                            message: '购买成功',
                            type: 'success'
                        })
                        this.getInfo()
                    }
                }
            })

        },
        openXiezuo() {
            this.dialogVisible2 = true
            this.getCols()
        },

        applyUser() {
            let params = {
                id: this.id,
                op: 3, // 申请协作
                invite_id: this.uid
            }
            this.$api.applyNow(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.uid = ''

                }
            })
        },
        // 申请访问专栏
        applyNow() {
            let params = {
                id: this.id,
                op: 2, // 申请协作
                remark: this.remark,
                apply_id: this.col_id
            }
            this.$api.applyNow(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.dialogVisible2 = false
                    this.remark = ''
                    this.onClose1()

                }
            })
        },

        // 绑定专栏列表
        getCols() {
            this.loadingc = true

            let params = {
                page: this.pageNumc,
                is_mine: 1,
                col_id: this.id,
                type: 3
            }
            this.$api.getCols(params).then(res => {
                if (res.data.code == 1) {
                    let response = res.data.data
                    this.totalPagec = response.last_page
                    if (this.totalPagec <= this.pageNumc) {
                        this.showMore1 = false
                    } else {
                        this.showMore1 = true
                    }
                    this.cols = this.cols.concat(response.data)
                    this.loadingc = false
                }
            })
        },

        // 绑定专栏列表
        // getCols() {
        //     let params = {
        //         is_mine: 1,
        //         col_id: this.id,
        //         type: 3
        //     }
        //     this.$api.getCols(params).then(res => {
        //         if (res.data.code == 1) {
        //             this.cols = res.data.data
        //         }
        //     })
        // },

        // 账号列表
        getUsers() {
            this.$api.getUsers().then(res => {
                if (res.data.code == 1) {
                    this.users = res.data.data
                    this.dialogVisible = true

                }
            })
        },
        goFabu() {
            this.$router.push({
                path: '/columnPost/library',
                query: {
                    id: this.id
                }
            })
        },
        // 私享会列表
        getList() {
            this.loading = true
            let params = {
                page: this.pageNum,
                is_mine: this.curType2 == 1 ? 1 : ''
            }
            this.$api.getVipList(params).then(res => {
                if (res.data.code == 1) {
                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.loading = false
                }

            })
        },
        getInfo() {
            let params = {
                id: this.id
            }
            this.$api.getVipInfo(params).then(res => {
                if (res.data.code == 1) {
                    this.info = res.data.data.info;
                    this.tabList = res.data.data.tabs
                    console.log(this.tabList)
                    if (this.info) {
                        this.id = res.data.data.info.id
                    }
                }

            })
        },
        getfocus() {
            this.cover = true

        },
        getblur() {
            this.cover = false
        },

        onsubmit() {
            console.log('submit');

        },
        onsubmit2() {
            console.log('submit');

        },
        load() {
            // console.log('触底')
            var page = this.pageNum
            //如果请求未结束就返回不连续请求
            if (this.loading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPage) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNum = page
            // this.getList()
        },
        getTabtype(t, url) {
            this.curType = t
            if (this.path != url) {
                this.$router.push({
                    path: url,
                    query: {
                        id: this.id
                    }
                })
            }
        },
        getTabtype2(t) {
            this.curType2 = t
            this.pageNum = 1
            this.list = []
            this.getList()

        },

        goPage(url, id) {
            // 获取选中切换的私享会
            this.id = id
            this.getInfo()

            if (this.path != url) {
                this.$router.push({
                    path: url,
                    query: {
                        id
                    }
                })
            }

        }
    },
}
</script>
<style lang="scss" scoped>
.main-con {
    display: flex;

    .left_main {
        margin-right: 1.04rem;
    }
}

.rightMain {
    flex: 1;
    border-top: 0.05rem solid #E8E8E8;

    .top {
        padding: 1.1rem 1.04rem;
        height: 88px;
        display: flex;
        align-items: center;
        background-color: #1068E7;
        width: 100%;

        >p {
            font-weight: bold;
            font-weight: 400;
            font-size: 36px;
            color: #FFFFFF;
            flex: 1;
            width: 200px;
        }

        .author {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            margin-right: 52px;
            margin-left: 50px;

            .name {
                margin-top: 10px;
                margin-right: 30px;
            }

            .price {
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;

                span {
                    font-size: 28px;
                }

                margin-right: 22px;
            }

            .pay {
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 60px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #F9C541;
            }
        }

        .btn {
            margin-right: 31px;
            display: flex;
            align-items: center;

            >div {
                cursor: pointer;
                border-radius: 4px;
                border: 1px solid #FFFFFF;
                padding: 8px 10px;
                margin-right: 10px;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .icon {
            i {
                color: #fff;
                font-size: 27px;
                margin-right: 17px;

            }
        }

    }


    .r_main {
        width: 100%;
        display: flex;

        .tabIn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 35px 0 6px;
            background-color: #fff;
            position: sticky;
            top: 98px;
            z-index: 99;
            border-bottom: 1px solid #E5E5E5;
            margin-bottom: 10px;

            .tab {
                display: flex;
                align-items: center;

                >div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 100px;
                    cursor: pointer;
                    position: relative;
                    font-size: 25px;
                    color: #909399;
                    padding: 0 10px;

                    .actives {
                        font-weight: bold;
                        color: #1068E7;
                    }

                    .botLine {
                        width: 100%;
                        height: 3px;
                        box-sizing: content-box;
                        position: relative;
                        top: calc(100% + 5px);
                        position: absolute;
                        left: 0;
                        right: 0;

                        >span {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: inline-block;
                            width: 0;
                            height: 3px;
                            background-color: #1068E7;
                            border-radius: 3px;
                        }

                        .active {
                            animation: expandWidth .5s forwards;
                        }

                        @keyframes expandWidth {
                            0% {
                                width: 0;
                            }

                            100% {
                                width: 100%;
                            }
                        }
                    }
                }



            }

            .search {
                margin-left: 4.4rem;
                position: relative;
                width: 280px;
                height: 48px;
                display: flex;
                align-items: center;

                img {
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    top: calc(50% - 11px);
                    right: 11px;
                }

                input {
                    width: 280px;
                    height: 48px;
                    outline: none;
                    background: #F6F6F6;
                    border-radius: 1.25rem;
                    padding: 0 3rem 0 1.2rem;
                    box-sizing: border-box;
                    font-size: 0.83rem;
                    border: none;
                    border: 1px solid #F6F6F6;

                    &:focus {
                        border: 1px solid #1068E7;
                    }
                }

                .pla {
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;
                }
            }
        }

        .tabIn2 {
            margin: 20px 0 0 20px;
            padding: 20px;
            background-color: #E7F1FE;
            z-index: 99;
            width: 300px;
            position: sticky;
            top: 99px;
            height: calc(100vh - 250px);
            min-height: 200px;

            .tab {
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                background-color: #E7F1FE;

                >div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 55px;
                    cursor: pointer;
                    position: relative;

                    .actives {
                        font-weight: bold;
                        color: #1068E7;
                    }

                    .botLine {
                        width: 100%;
                        height: 3px;
                        box-sizing: content-box;
                        position: relative;
                        top: calc(100% + 5px);
                        position: absolute;
                        left: 0;
                        right: 0;

                        >span {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: inline-block;
                            width: 0;
                            height: 3px;
                            background-color: #1068E7;
                            border-radius: 3px;
                        }

                        .active {
                            animation: expandWidth .5s forwards;
                        }

                        @keyframes expandWidth {
                            0% {
                                width: 0;
                            }

                            100% {
                                width: 100%;
                            }
                        }
                    }
                }

                .coverout {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    margin-right: 0;
                    flex-direction: row;

                    img {
                        width: 22px;
                        height: 22px;
                    }
                }

                .search {
                    padding: 8px 0;
                    box-sizing: content-box;
                    position: relative;
                    width: 160px;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    margin-right: 0;

                    // animation: reduceWidth .3s forwards;
                    img {
                        width: 22px;
                        height: 22px;
                        cursor: pointer;
                        position: absolute;
                        top: calc(50% - 11px);
                        right: 1.2rem;
                    }

                    input {
                        width: 100%;
                        height: 100%;
                        outline: none;
                        background: #F6F6F6;
                        border-radius: 1.25rem;
                        padding: 0 3rem 0 1.2rem;
                        box-sizing: border-box;
                        font-size: 0.83rem;
                        border: none;
                        border: 1px solid #F6F6F6;

                        &:focus {
                            border: 1px solid #1068E7;
                        }
                    }

                    .pla {
                        font-weight: 400;
                        font-size: 0.83rem;
                        color: #666666;
                    }
                }

                .cover {
                    width: 100%;
                    position: absolute;
                    right: 0;
                    top: 3px;
                    animation: expandWidths .3s forwards;
                }

                @keyframes reduceWidth {
                    0% {
                        width: 100%;
                    }

                    100% {
                        width: 160px;
                    }
                }

                @keyframes expandWidths {
                    0% {
                        width: 160px;
                    }

                    100% {
                        width: 100%;
                    }
                }

            }

            .titleList {
                height: calc(100vh - 350px);
                overflow-y: auto;
                -ms-overflow-style: none;


                .titleMa {
                    cursor: pointer;
                    padding: 20px 0;
                    border-bottom: 1px solid #CDCCCA;

                    &:hover {
                        color: #1068E7;
                    }

                    .active {
                        color: #1068E7;
                    }
                }
            }

        }

        .titleList::-webkit-scrollbar {
            display: none;
        }

        .form_con {
            min-height: 500px;
            display: flex;
            padding: 0 5px;
            // overflow-y: auto;
        }
    }
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}

.dialog-footer2 {
    display: flex;
    justify-content: center;

    button {
        width: 90px;
        height: 40px;
        font-size: 15px;
        line-height: 40px;
        padding: 0;
    }
}



.sousuo {

    .sstop {
        padding: 0 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >p {
            font-weight: bold;
            font-size: 20px;
            color: #000000;
        }
    }


    .ptabs {
        height: calc(100vh - 350px);
        overflow-y: auto;
        -ms-overflow-style: none;
        padding-bottom: 104px;
        min-height: 300px;
        width: 100%;

        &::-webkit-scrollbar {
            width: 0;
        }

        >div {
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 20px;
            color: #333333;
            position: relative;
            cursor: pointer;
            width: 100%;

            .line1 {
                padding-right: 20px;

                &:hover {
                    color: #1068E7;
                }
            }

            .videoType {
                color: #fff;

                &:hover {
                    color: #66CCFF;
                }
            }

            .try {
                position: absolute;
                right: -40px;
                top: 0;
                color: #1068E7;
            }
        }
    }

}

@media screen and (max-width:768px) {
    .main-con {
        width: 100%;
    }

    .left_main {
        display: none;
    }

    .rightMain {
        width: 100vw;

        .top {
            position: relative;
            height: auto;
            padding: 10px;
            flex-direction: column;
            align-items: flex-start;

            >p {
                font-size: 18px;
                width: 80%;
            }

            .author {
                margin: 10px 0;

                .name {
                    font-size: 12px;
                }

                .price {
                    font-size: 15px;

                    span {
                        font-size: 15px;
                    }
                }
            }

            .btn {
                position: absolute;
                right: 0;
                bottom: 10px;
                display: flex;
                justify-content: flex-end;

                >div {
                    font-size: 13px;
                    padding: 5px;
                }
            }

            .icon {
                display: flex;
                position: absolute;
                right: 10px;
                top: 5px;

                i {
                    font-size: 14px;
                }
            }
        }

        .r_main {
            flex-direction: column-reverse;

            >div {
                width: 100%;
            }

            .tabIn2 {
                padding: 10px 15px;
                margin: 0;
                position: relative;
                min-height: 200px;
                width: 100%;
                height: 250px;
                top: 0;

                .sousuo {
                    .sstop {
                        p {
                            font-size: 15px;
                        }

                        button {
                            font-size: 12px;
                        }

                    }

                    .ptabs {
                        height: 180px;

                        >div {
                            padding: 10px;
                            font-size: 14px;
                        }
                    }
                }

                .titleList {
                    height: 200px;

                    .titleMa {
                        font-size: 14px;
                        padding: 10px;
                    }
                }

                .tab {

                    >div {
                        font-size: 16px;
                        margin-right: 40px;
                        position: static;
                    }

                    .coverout img {
                        width: 20px;
                        height: auto;
                        position: absolute;
                        right: 20px;
                        top: 7px;
                    }

                    .search {
                        height: 35px;
                        box-sizing: border-box;
                        padding: 0 10px;

                        input {
                            font-size: 16px;
                            padding-right: 30px;
                            padding-left: 20px;
                        }

                        img {
                            width: 20px;
                            height: auto;
                            right: 20px;
                            top: 7px;
                        }
                    }
                }
            }

            .tabIn {
                .tab {
                    padding: 10px;
                    justify-content: space-between;
                    width: 100%;
                    >div {
                        font-size: 16px;
                        &:last-child{
                            margin: 0;
                        }
                    }
                }
            }
        }


    }



}
</style>